<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="systemKey">
          <el-input v-model="queryForm.systemKey" placeholder="不区分大小模糊查询"></el-input>
        </el-form-item>
        <el-form-item label="useCase">
          <el-input v-model="queryForm.useCase" placeholder="不区分大小模糊查询"></el-input>
        </el-form-item>
        <el-form-item label="module">
          <el-input v-model="queryForm.module" placeholder="不区分大小模糊查询"></el-input>
        </el-form-item>
        <el-form-item label="category">
          <el-input v-model="queryForm.category" placeholder="不区分大小模糊查询"></el-input>
        </el-form-item>
        <el-form-item label="subCategory">
          <el-input v-model="queryForm.subCategory" placeholder="不区分大小模糊查询"></el-input>
        </el-form-item>
        <el-form-item label="loggerLevel">
          <el-select filterable clearable v-model="queryForm.loggerLevel" placeholder="请选择日志级别">
            <el-option
              v-for="item in loggerLevelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="traceId">
          <el-input v-model="queryForm.traceId" placeholder="精准查询"></el-input>
        </el-form-item>
        <el-form-item label="businessNo">
          <el-input v-model="queryForm.businessNo" placeholder="精准查询"></el-input>
        </el-form-item>
        <el-form-item label="uniqueKey">
          <el-input v-model="queryForm.uniqueKey" placeholder="精准查询"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="addNew">新增</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :row-class-name="tableRowClassName"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        :data="pageResult.data"
        border
        :default-sort="{prop: 'updateTime', order: 'descending'}"
        style="width: 100%; margin-top: 20px;font-size: 10px">
        <el-table-column
          align="center"
          prop="systemKey"
          label="systemKey">
        </el-table-column>
        <el-table-column
          align="center"
          prop="useCase"
          label="useCase">
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="traceId"
          label="traceId">
        </el-table-column>
        <el-table-column
          align="center"
          prop="businessNo"
          label="businessNo">
        </el-table-column>
        <el-table-column
          align="center"
          prop="module"
          label="module">
        </el-table-column>
        <el-table-column
          align="center"
          prop="category"
          label="category">
        </el-table-column>
        <el-table-column
          align="center"
          prop="subCategory"
          label="subCategory">
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          prop="uniqueKey"
          label="uniqueKey">
        </el-table-column>
        <el-table-column
          align="center"
          prop=""
          label="日志级别">
          <template slot-scope="scope">
           <span :style="loggerLevelStyle(scope.row.loggerLevel)"><b>{{ scope.row.loggerLevel }}</b></span>
          </template>
        </el-table-column>
        <el-table-column
          sortable
          align="center"
          width="150"
          label="修改时间">
          <template slot-scope="scope">
            {{ baseDateFormat(scope.row.updateTime) }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          width="150"
          label="操作">
          <template slot-scope="scope">
            <el-button style="margin-left: 0px;color: #a70fe3" type="text" size="mini" @click="toEdit(scope.row)">编辑</el-button>
            <el-button style="margin-left: 0px;color: black" type="text" size="mini" @click="toCopy(scope.row)">复制</el-button>
            <!-- TODO 暂时不支持删除 -->
            <!--            <el-button style="margin-left: 0px;color: red" type="text" size="mini" @click="deleteOne(scope.row)">删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>

      <el-footer>
        <vue-page :paginator="pageResult.paginator" :query="query"></vue-page>
      </el-footer>
    </el-card>

    <burying-form ref="buryingForm"></burying-form>
  </div>
</template>

<script>
import vuePage from "@/views/common/vue-page.vue";
import vueLog from "@/views/common/vue-log.vue";
import buryingForm from "@/views/bic-burying/dialog/burying-form.vue";
import {systemSelector} from "@/api/loadSelectorApi";
import {buryingPageQuery} from "@/api/burying";

export default {
  name: "burying",
  components: {
    buryingForm,
    vuePage,
    vueLog,
  },
  data() {
    return {
      loggerLevelOptions: [{
        label: "DEBUG",
        value: "DEBUG",
      }, {
        label: "INFO",
        value: "INFO",
      }, {
        label: "WARNING",
        value: "WARNING",
      }, {
        label: "ERROR",
        value: "ERROR",
      }
      ],
      queryForm: {
        traceId: '',
        businessNo: '',
        systemKey: '',
        useCase: '',
        module: '',
        category: '',
        subCategory: '',
        loggerLevel: '',
        message: '',
        uniqueKey: ''
      },
      // 查询返回结果
      pageResult: {
        data: [],
        paginator: {
          currentPage: 0,
          totalCount: 0,
          pageSize: 10,
          totalPage: 0
        }
      },
      logTargetId: undefined,
    }
  },
  async created() {
    let vm = this
    vm.systemOptions = await systemSelector()
    await vm.query()
  },
  methods: {
    async query() {
      let vm = this
      let loading = vm.loading();
      let ret = await buryingPageQuery(vm.queryForm, vm.pageResult.paginator)
      loading.close()
      if (ret.ok) {
        vm.pageResult = ret.data.queryPage
      } else {
        vm.$message({type: 'error', message: '查询失败：' + ret.message});
      }
    },
    addNew() {
      this.$refs.buryingForm.load();
    },
    toEdit(row) {
      this.$refs.buryingForm.load(row);
    },
    toCopy(row) {
      let obj = this.$cloneObj(row);
      obj.id = ''
      this.$refs.buryingForm.load(obj);
    },
    tableRowClassName({row, rowIndex}) {
      // if (row.loggerLevel === 'DEBUG') {
      //   return 'debugger-row';
      // } else if (row.loggerLevel === 'INFO') {
      //   return 'info-row';
      // } else if (row.loggerLevel === 'WARNING') {
      //   return 'warning-row';
      // } else if (row.loggerLevel === 'ERROR') {
      //   return 'error-row';
      // }
      return '';
    },
    loggerLevelStyle(loggerLevel){
      if (loggerLevel === 'DEBUG'){
        return "color: #5ecaf1"
      }
      if (loggerLevel === 'ERROR'){
        return "color: red"
      }
      if (loggerLevel === 'INFO'){
        return "color: #a2f375"
      }
      if (loggerLevel === 'WARNING'){
        return "color: #efc067"
      }
      return ""
    }
  }
}
</script>

<style>

.el-table .debugger-row {
  background: #5ecaf1;
}

.el-table .warning-row {
  background: #efc067;
}

.el-table .info-row {
  background: #a2f375;
}

.el-table .error-row {
  background: #f68e8e;
}


/*自定义button颜色 reset*/
.el-button--reset.is-active,
.el-button--reset:active {
  background: #a70fe3;
  border-color: #a70fe3;
  color: #fff;
}

.el-button--reset:focus,
.el-button--reset:hover {
  background: #a70fe3;
  border-color: #a70fe3;
  color: #fff;
}

.el-button--reset {
  color: #FFF;
  background-color: #a70fe3;
  border-color: #a70fe3;
}


/*自定义button颜色 goon*/
.el-button--black.is-active,
.el-button--black:active {
  background: #47e1c5;
  border-color: #47e1c5;
  color: #fff;
}

.el-button--black:focus,
.el-button--black:hover {
  background: #47e1c5;
  border-color: #47e1c5;
  color: #fff;
}

.el-button--black {
  color: #FFF;
  background-color: #47e1c5;
  border-color: #47e1c5;
  padding: 7px 12px;
}

</style>
